/*
  学习目标：React-JSX初体验
*/

import React from 'react';
import ReactDOM from 'react-dom';

const liNode1 = React.createElement('li', null, '香蕉');
const liNode2 = React.createElement('li', null, '苹果');
const liNode3 = React.createElement('li', null, '橘子');

const ulNode2 = React.createElement('ul', { className: 'list' }, [liNode1, liNode2, liNode3]);

// 🔔JSX是React.createElement的语法糖
// 经过babel编译后与React.createElement是一模一样的作用
const ulNode = (
  <ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>橘子</li>
  </ul>
);

console.log('ulNode2, ulNode  ----->  ', ulNode2, ulNode);

ReactDOM.render(ulNode, document.getElementById('root'));
